<template>
  <div>
    <div class="serviceHeader">
      <div class="breadcrumbs">
        <div class="container">
          <a href="/">首页</a> <span class="sep">/</span> <span>售后服务详情</span>
        </div>
      </div>
      <div class="container">
        <div class="content">
          <div class="service-box service-main-box">
            <div class="service-content-box">
              <div class="box-hd">
                <h1 class="title">售后服务详情</h1>
              </div>
              <div class="box-bd">
                <div style="padding: 20px 0">
                  <el-steps :active="active" finish-status="success">
                    <el-step title="选择产品和服务"></el-step>
                    <el-step title="填写申请单"></el-step>
                    <el-step title="完成申请"></el-step>
                  </el-steps>
                </div>
                <div class="service-step-box">
                  <div class="service-section">
                    <div class="section-hd"><h2 class="section-title">选择进行售后的商品</h2></div>
                    <div class="section-bd">
                      <div class="product-detail">
                        <dl class="detail-list">
                          <dt class="name">
                            订单号号：{{ orderNo }}
                            <span style="margin-left: 100px;color: #b0b0b0">x{{ order_goods.quantity }}</span>
                          </dt>
                          <dd class="imei-no">
                            {{ order_goods.productName }}
                          </dd>
                          <dd class="imei-no">
                            <span class="goods_price">¥{{ order_goods.totalPrice }}</span>
                          </dd>
                        </dl>
                        <!--                        <a href="/service/aftersale/apply?order_id=5180710898712322" class="back">换其他产品 &gt;</a>-->
                        <img
                          :src="order_goods.imgurl"
                          alt="" class="thumb">
                      </div>
                    </div>
                  </div>
                  <div class="service-section">
                    <div class="section-hd"><h2 class="section-title">申请信息</h2></div>
                    <div class="section-bd">
                      <div class="service-detail">
                        <ul>
                          <li>
                            <label>服务类型：</label>
                            <span>{{ Detail.service.service_name }}</span>
                          </li>
                          <li>
                            <label>货物状态：</label>
                            <span>{{ Detail.good_status == 0 ? '未收到货' : '已收到货' }}</span>
                          </li>
                          <li v-show="Detail.insurance_name">
                            <label>保险类型：</label>
                            <span>{{ Detail.insurance_name }}</span>
                          </li>
                          <li>
                            <label>申请原因：</label>
                            <span>{{ Detail.service_reason }}</span>
                          </li>
                          <li>
                            <label>申请说明：</label>
                            <p style="word-wrap:break-word;word-break:break-all;text-indent : 20px">
                              {{ Detail.instructions }}
                            </p>
                          </li>
                          <li v-show="Detail.refund_amount">
                            <lable>退款金额：</lable>
                            <span style="color: red">¥{{ Detail.refund_amount }}</span>
                          </li>
                          <li v-show="Detail.instructions_imgList.length > 0">
                            <lable>上传凭证：</lable>
                            <div>
                              <img v-for="(item,index) in Detail.instructions_imgList"
                                   :key="index" :src="item" alt="" @click="openImg(item)">
                            </div>
                          </li>
                          <li v-show="Detail.service_way">
                            <lable>服务方式：</lable>
                            <span>{{ Detail.service_way }}</span>
                          </li>
                          <li v-show="Detail.returnAddress">
                            <lable>收货地址：</lable>
                            <span>{{ Detail.returnAddress }}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="service-section">
                    <div class="section-hd"><h2 class="section-title">商家进度</h2></div>
                    <div class="section-bd">
                      <div class="service-detail">
                        <ul>
                          <li v-if="Detail.status == 0">
                            <div>
                              <el-tag type="info">等待商家处理中...</el-tag>
                            </div>
                          </li>
                          <li v-else-if="Detail.status == 2">
                            <div style="margin-bottom: 10px">
                              <el-tag type="danger">商家已拒绝</el-tag>
                            </div>
                            <lable>商家留言：</lable>
                            <span style="color: red">{{ Detail.store_reply }}</span>
                          </li>
                          <li v-else>
                            <div style="margin-bottom: 10px">
                              <el-tag type="success">商家已同意</el-tag>
                            </div>
                            <lable>商家留言：</lable>
                            <span>{{ Detail.store_reply }}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="Detail.status == 2">
                <el-button type="warning" round @click="starTribunal()">申请小法庭仲裁</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="breadcrumbs">
        <div class="container">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "serviceDetail",
    components: {},
    data() {
      return {
        orderNo: this.$route.query.orderNo,
        good_id: this.$route.query.good_id,
        tribunal_id: null,
        active: 3,
        order_goods: {},
        Detail: { //service_order
          // instructions_imgList: ''
        }
      }
    },
    created() {
      this.getOrderGoodInfo()
      this.getServiceOrderInfo()
      console.log(this)
    },
    methods: {
      async getOrderGoodInfo() {
        let res = await this.$axios.get('/orders/getOrderGoodByGoodIdAndOrderNo', {
          params: {
            'good_id': this.good_id,
            'orderNo': this.orderNo,
          }
        })
        this.order_goods = res.data
      },
      async getServiceOrderInfo() {
        let res = await this.$axios.get('/serviceOrder/getServiceOrderDetailByOrderNoAndGoodId', {
          params: {
            'good_id': this.good_id,
            'orderNo': this.orderNo,
          }
        })
        this.Detail = res.data
        if (this.Detail.instructions_img) {
          this.Detail.instructions_imgList = this.Detail.instructions_img.split(",")
        } else {
          this.Detail.instructions_imgList = []
        }
      },
      addEvidence(data) {
        this.$axios.post('/evidence/addEvidenceByTribunalId', {
          ...data
        }).then((res)=> {
          if (res.status == 200) {
            // this.$message({
            //   type: 'success',
            //   message: res.msg,
            // });
          } else {
            this.$message.error(res.msg || '提交证据失败');
            return false
          }
        })
      },
      async addTribunal() {
        let good_status = this.Detail.good_status == 0 ? "未收到货" : "已收到货"
        let res = await this.$axios.post('/tribunal/addTribunal', {
          "orderNo": this.orderNo,
          "good_id": this.good_id,
          "user_name": sessionStorage.getItem('username'),
          "tribunal_describe": "发起了" + this.Detail.service.service_name + "," +
            "货物状态:" + good_status + "," + "原因:" +
            this.Detail.instructions + "," + "金额:" + this.Detail.refund_amount,
          evidence_img: this.Detail.instructions_img
        })
        this.tribunal_id = res.tribunal_id
        if (res.status != 200){
          this.$message.error(res.msg || '申请失败');
        } else {
          //提取双方申请证据插入evidence表
          let good_status = this.Detail.good_status == 0 ? "未收到货" : "已收到货"
          let buyer_evidence = {
            tribunal_id: this.tribunal_id,
            evidence_font: "发起了" + this.Detail.service.service_name + "," +
              "货物状态:" + good_status + "," + "原因:" +
              this.Detail.instructions + "," + "金额:" + this.Detail.refund_amount,
            evidence_img: this.Detail.instructions_img,
            status: 0
          }
          let seller_evidence = {
            tribunal_id: this.tribunal_id,
            evidence_font: "卖家拒绝了本次售后申请。拒绝说明：" + this.Detail.store_reply,
            status: 1
          }
          this.addEvidence(buyer_evidence)
          this.addEvidence(seller_evidence)
          let _this = this
          this.$message({
            message: res.msg+","+"请前往个人中心小法庭提交证据",
            type: 'success',
            onClose: function (){
              _this.$router.replace({
                name:'myTribunal',
              })
            }
          });
        }
      },
      async starTribunal() {
        const confirmResult = await this.$confirm('是否确认发起小法庭, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).catch((err) => err);
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消');
        }
        //发起法庭return id
        await this.addTribunal()
      },
      openImg(src) {
        window.open(src, "_blank");
      },
    }
  }
</script>

<style scoped>
  .goods_price {
    color: red;
    font-weight: bold;
  }

  .serviceHeader {
    background: #f5f5f5;
  }

  .breadcrumbs, .breadcrumbs a {
    color: #757575;
  }

  .breadcrumbs {
    height: 40px;
    font-size: 12px;
    line-height: 40px;
    background: #f5f5f5;
  }

  .container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
  }

  .content {
    width: 100%;
  }

  .service-main-box {
    padding: 36px 0;
  }

  .service-box {
    background: #fff;
  }

  .service-content-box {
    margin: 0 120px;
  }

  .title {
    margin: 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 68px;
    color: #b0b0b0;
  }

  .service-content-box .service-section .section-hd {
    height: 50px;
    padding: 0 32px;
    margin-bottom: 28px;
    border-left: 2px solid #ff6700;
    background-color: #eee;
    color: #333;
  }

  .service-content-box .service-section .section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 50px;
  }

  .service-content-box .service-section .section-bd {
    margin-bottom: 28px;
  }

  .service-content-box .product-detail {
    position: relative;
    height: 70px;
    padding: 35px 124px 35px 135px;
    border: 1px solid #e0e0e0;
    border-left: 2px solid #b0b0b0;
    font-size: medium;
  }

  .service-detail {
    padding: 20px 100px 20px 100px;
    border: 1px solid #e0e0e0;
    border-left: 2px solid #b0b0b0;
    font-size: medium;
  }

  .service-detail img {
    width: 100px;
    height: 100px;
    flex-direction: row;
  }

  .service-detail li {
    margin-bottom: 5px;
  }

  .service-content-box .product-detail .detail-list, .service-content-box .product-detail .detail-list dd {
    margin: 0;
  }

  .service-content-box .product-detail .back {
    position: absolute;
    right: 40px;
    top: 60px;
    font-size: 12px;
    color: #ff6700;
  }

  .service-content-box .product-detail .thumb {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
  }

  .service-content-box .service-section .section-hd {
    height: 50px;
    padding: 0 32px;
    margin-bottom: 28px;
    border-left: 2px solid #ff6700;
    background-color: #eee;
    color: #333;
  }

  .service-content-box .service-section .section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 50px;
  }

  .service-content-box .service-label-list {
    width: 902px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    _zoom: 1;
  }

  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  .service-content-box .service-label-list-large li {
    width: 284px;
    height: 76px;
    margin-right: 15px;
  }

  .service-content-box .service-label-list .active {
    border-color: #83c44e;
    color: #83c44e;
    cursor: default;
  }

  .service-content-box .service-label-list li {
    float: left;
    _display: inline;
    width: 160px;
    height: 40px;
    margin: 0 20px 20px 0;
  }

  /*router-link*/
  .service-content-box .service-label-list-large a {
    width: 282px;
    height: 74px;
    font-size: 18px;
    line-height: 74px;
  }

  .service-content-box .service-section .tip {
    margin: -10px 0 30px 20px;
    color: #757575;
  }

  /*router-link*/
  .service-content-box .service-label-list a {
    display: block;
    width: 158px;
    height: 38px;
    border: 1px solid #b0b0b0;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    color: #757575;
    cursor: pointer;
  }
</style>
